<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
            <el-form-item label="检查项名称" prop="precheckName">
                <el-input v-model="queryParams.precheckName" placeholder="请输检查项名称" clearable style="width: 200px"
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
            </el-col>
        </el-row> -->
        <el-button type="primary" plain icon="Plus" style="margin-left: 16px" @click="drawer = true">
            新增
        </el-button>
        <!-- 新增页面对话框 -->
        <el-drawer v-model="drawer" title="新增页面" :with-header="true" size="45%">
            <div class="demo-drawer__content">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="上级菜单" prop="precheckName" >
                    <!-- <el-input v-model="form.precheckName" placeholder="请选择上级菜单" style="width: 50%" size="large"/> -->
                    <el-select v-model="value" placeholder="请选择上级菜单" style="width: 50%" size="large">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" prop="remark">
                    <div>
                        <el-radio-group v-model="radio1">
                        <el-radio label="1"  border>菜单</el-radio>
                        <el-radio label="2"  border>规则</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                
                <el-form-item label="菜单名称" prop="remark" >
                    <el-input v-model="form.remark" placeholder="请输入内容" style="width: 50%" size="large"/>
                </el-form-item>

                
                <div v-if="radio1 === '1'" class="radio1">
                    <el-form-item label="路由地址" prop="remark">
                        <el-input v-model="form.remark" placeholder="请输入内容" style="width: 50%" size="large"/>
                    </el-form-item>
                    <el-form-item label="排序" prop="remark">
                        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
                    </el-form-item>
                    <el-form-item label="菜单状态" prop="status">
                        <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                </div>
                <div v-if="radio1 === '2'" class="radio2">
                    <el-form-item label="权限标识" prop="remark">
                        <el-input v-model="form.remark" placeholder="请输入内容" style="width: 50%" size="large"/>
                    </el-form-item>
                    <el-form-item label="权限描述" prop="remark">
                        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"  :rows="4" style="width: 50%" size="large"/>
                    </el-form-item>
                </div>
            </el-form>
        </div>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelClick">取消</el-button>
                    <el-button type="primary" @click="confirmClick">确认</el-button>
                </div>
            </template>
        </el-drawer>


        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
            <el-table-column label="序号" type="index" width="80px" align="center"></el-table-column>
            <el-table-column label="菜单" align="center" prop="menuName"></el-table-column>
            <el-table-column label="状态" align="center" prop="status">
                <template #default="scope">
                    <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
                    <el-tag v-else type="danger">停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button  type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button  type="primary" icon="Plus" @click="handleUpdate(scope.row)">添加</el-button>
                    <el-button  type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script setup name="Post">
import { list, update, deleteById, add } from "@/api/system/wxmenuManage";

const { proxy } = getCurrentInstance();

const dataList = ref([]);
const open = ref(false);
const loading = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const drawer = ref(false)
const radio1 = ref('1')
const radio2 = ref('1')
const num = ref(1)


const data = reactive({
    form: {},
    queryParams: {
        current: 1,
        pageSize: 10,
        menuName: undefined,
        status: 1,
        type: 1,
        category: 2
    },
});

const { queryParams, form, rules } = toRefs(data);

// 上级菜单select选择
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
/** 查询岗位列表 */
function getList() {
    loading.value = true
    list(new URLSearchParams(queryParams.value))
        .then((response) => {
            console.log(response)
            dataList.value = response.data
            loading.value = false
        })
        .catch((err) => {
            loading.value = false
        })
}

/** 取消按钮 */
function cancel() {
    open.value = false;
    reset();
}

/** 表单重置 */
function reset() {
    form.value = {
        id: undefined,
        precheckName: undefined,
        status: '1',
        remark: undefined,
        deleted: 0,
        type: 1,
        isSystem: 1,
    };
    proxy.resetForm("formRef");
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.current = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}
/** 新增按钮操作 */
function handleAdd() {
    reset()
    open.value = true
    title.value = '添加检查项信息'
}
/** 修改按钮操作 */
function handleUpdate(row) {
    console.log(row)
    form.value = { ...row }
    open.value = true
    title.value = '修改检查项信息'
}

/** 提交按钮:等待新增和修改请求接口 */
function submitForm() {
    proxy.$refs['formRef'].validate((valid) => {
        if (valid) {
            if (form.value.id != null) {
                update(form.value).then((response) => {
                    proxy.$modal.msgSuccess('修改检查项成功')
                    open.value = false
                    getList()
                })
            } else {
                add(form.value).then((response) => {
                    proxy.$modal.msgSuccess('新增检查项成功')
                    open.value = false
                    getList()
                })
            }
        }
    })
}
/** 删除按钮操作 */
function handleDelete(row) {
    console.log(row)
    proxy.$modal
        .confirm('是否确认删除 "' + row.precheckName + '" 检查项？')
        .then(function () {
            return deleteById(row.id)
        })
        .then(() => {
            getList()
            proxy.$modal.msgSuccess('删除成功')
        })
        .catch(() => { })
}

getList();
</script>